<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

    <div class="container">
        <!-- 导航栏商标 -->
        <a class="navbar-brand" href="{% url 'article:my_article_list' %}">我的创作</a>

        <!-- 导航入口 -->
        <div>
            <ul class="nav nav-pills" role="tablist">
            <!-- 条目 -->
            <li class="nav-item">
                <!-- 改写了这里的 href -->
                <a class="nav-link" href="{% url 'article:article_list' %}">主页</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="{% url 'article:article_create' %}">写文章</a>
            </li>

            <!-- Django的 if 模板语句 -->
            {% if user.is_authenticated %}

                <a class="nav-link" href="{% url 'userprofile:edit' user.id %}">
                    {% if user.profile.avatar %}
                        <img src="{{ user.profile.avatar.url }}" height="30" width="30" style="border-radius: 15%;margin-top: 5%;">
                    {% else %}
                        暂无头像
                    {% endif %}
                </a>



                <!-- 如果用户已经登录，则显示用户名下拉框 -->
                <li class="nav-item dropdown">


                    <a class="nav-link dropdown-toggle"
                       href="#" id="navbarDropdown"
                       role="button" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false">


                        {{ user.username }}
                    </a>


                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
<!--                        <a data-toggle="dropdown" href="#">下拉菜单（Dropdown）触发器</a>-->


                        <a class="dropdown-item" href='{% url "userprofile:edit" user.id %}'
                        >个人信息</a>
                        <a class="dropdown-item" href='{% url "userprofile:logout" %}'
                        >退出登录</a>
<!--                        <a class="dropdown-item" href="#" onclick="user_delete()">删除用户</a>-->
                    </div>
                </li>


                <!-- 新增 -->
                {% if user.is_authenticated %}
                <form
                    style="display:none;"
                    id="user_delete"
                    action="{% url 'userprofile:delete' user.id %}"
                    method="POST"
                >
                {% csrf_token %}
                    <button type="submit">发送</button>
                </form>
                    <script>
                        function user_delete() {
                            // 调用layer弹窗组件
                            layer.open({
                                title: "确认删除",
                                content: "确认删除用户资料吗？",
                                yes: function(index, layero) {
                                    $('form#user_delete button').click();
                                    layer.close(index);
                                },
                            })
                        }
                    </script>
                {% endif %}



            <!-- 如果用户未登录，则显示 “登录” -->
            {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'userprofile:login' %}">登录</a>
                </li>
            <!-- if 语句在这里结束 -->
            {% endif %}

          </ul>
        </div>
  </div>
</nav>


<style>
    div.next {
      background-color: lightblue;
      width: 100%;
      height: 60rem;
    }

    .container {
      padding: 0px;
    }

    nav.navbar {
      width: inherit;
      top: 0%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 99999;
    }
</style>
